<script setup lang="ts">
import {inject} from "vue";
import {cityList} from "@/api/task.ts";
import {taskStore} from "@/store/task.ts";
import {showToast} from "vant";

const {closeCitySwitch} = inject('popup')

const store = taskStore()
const getCities = async () => {
  const res = await cityList({})
  if (res) {
    store.setCityList(res)
  } else {
    showToast(res.msg)
  }
}
if (store.cityList.length <= 0) {
  getCities()
}
const onClickLeft = () => closeCitySwitch()
</script>

<template>
  <div class="city-container">
    <van-nav-bar title="城市切换" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="city-switch">
      <h3>当前城市：</h3>
      <div class="city-switch-text">
        <span>{{ store.cityValue }}</span>
      </div>
      <h3>切换城市</h3>
      <div class="city-switch-text">
        <span v-for="(item, index) in store.cityList" :key="index" @click="closeCitySwitch(item.name)">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.city-switch {
  padding: 0 0.7rem;
}

.city-switch h3 {
  margin: 0.7rem 0 0.96rem;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 0.8rem;
  color: #000;
}

.city-switch-text span {
  display: inline-block;
  margin: 0 0.7rem 0.8rem 0;
  width: 4.01rem;
  height: 1.6rem;
  line-height: 1.6rem;
  background: #FFF;
  border: 1px solid #EBEBEB;
  border-radius: 0.11rem;
  font-size: 0.64rem;
  text-align: center;
  font-weight: 400;
  color: #333;
}

.city-switch-text span:nth-child(4n) {
  margin-right: 0;
}
</style>